<template>
  <div>
    <!-- 书籍信息展示 -->
    <BookInfo :info='info'></BookInfo>
    <CommentList :comments="comments"></CommentList>
    <!-- 这一块我怎么感觉应该来个绝对定位 -->
    <div class="comment" v-if="showAdd">
    <textarea v-model='comment'
              class='textarea'
              :maxlength='100'
              placeholder='请输入图书短评'></textarea>
      <div class='location'>
        地理位置：
        <!-- 开关组件 -->
        <switch color='#EA5A49' :checked='location' @change='getGeo'></switch>
        <span class='text-primary'>{{location}}</span>
      </div>
      <div class='phone'>
        手机型号：
        <!-- change是自定义事件 -->
        <switch color='#EA5A49' :checked='phone' @change='getPhone'></switch>
        <span class='text-primary'>{{phone}}</span>
      </div>
      <button class="btn" @click='addComment'>
        评论
      </button>
    </div>
    <div v-else class='text-footer'>
      未登录或者已经评论过啦
    </div>
    <!-- 转发按钮 -->
    <button open-type='share' class="btn">转发给好友</button>
  </div>

</template>
<script>
  import {get, post, showModal} from '@/util'
  //  书籍信息显示
  import BookInfo from '@/components/BookInfo'
  //  评论数据显示
  import CommentList from '@/components/CommentList'
  export default {
    components: {
      BookInfo,
      CommentList
    },
    data () {
      return {
        comments: [],
        userinfo: {},
        bookid: '',
        info: {},
        comment: '',
        location: '',
        phone: ''
      }
    },
    computed: {
      showAdd () {
        // 没登录，不显示评论组件
        if (!this.userinfo.openId) {
          console.log('Detail_请登录')
          return false
        }
        // 评论页面里查到有自己的openid，则显示已经评论和转发，不显示评论插件
        // 已登录，但是已经评论了，则不再显示评论组件。。后期可以改造
        // filter是用来从数组中选择符合条件的元素组成新数组
        if (this.comments.filter(v => v.openid === this.userinfo.openId).length) {
          return false
        }
        return true
      }
    },
    methods: {
      //  添加评论
      async addComment () {
        if (!this.comment) {
          //  评论为空不予评论
          return
        }
        // 评论内容 手机型号  地理位置 图书id 用户的openid
        const data = {
          openid: this.userinfo.openId,
          bookid: this.bookid,
          comment: this.comment,
          phone: this.phone,
          location: this.location
        }
        console.log('评论信息：', data)
        try {
          //  默认每个人只能评论一次，其实这不科学
          await post('/weapp/addcomment', data)
          this.comment = ''
          //  加载这本书的评论，刷新评论
          this.getComments()
        } catch (e) {
          showModal('失败', e.msg)
        }
      },
      async getDetail () {
        const info = await get('/weapp/bookdetail', {id: this.bookid})
        wx.setNavigationBarTitle({
          title: info.title
        })
        this.info = info
      },
      async getComments () {
        const comments = await get('/weapp/commentlist', {bookid: this.bookid})
        console.log('获取书籍评论comments', comments)
        this.comments = comments.list || []
      },
      //  获取用户位置
      getGeo (e) {
        // RmKXCpjKlwyFUVVXSCXcLF4KUsOimuuy
        // 获取地理信息位置
        // https://lbsyun.baidu.com/
        //  进入百度地图开放平台注册开发者账号
        // http://lbsyun.baidu.com/index.php?title=webapi/ip-api
        //  他的秘钥用不了了，用自己的秘钥吧
        // const ak = 'RmKXCpjKlwyFUVVXSCXcLF4KUsOimuuy'
        const ak = 'F8GGZGTAevRPL7BwLtTjQvEzdAlpzqTt'
        let url = 'http://api.map.baidu.com/geocoder/v2/'

        if (e.target.value) {
          // geo  是获取到的经纬度
          wx.getLocation({
            success: geo => {
              console.log('获取到的经纬度:', geo)
              wx.request({
                url,
                data: {
                  ak,
                  location: `${geo.latitude},${geo.longitude}`,
                  output: 'json'
                },
                success: res => {
                  console.log(res)
                  if (res.data.status === 0) {
                    this.location = res.data.result.addressComponent.city
                  } else {
                    this.location = '未知地点'
                    // console.log('出错了')
                  }
                }
              })
            }
          })
        } else {
          this.location = ''
        }
      },
      // 获取设备信息
      getPhone (e) {
        console.log('手机型号获取中')
        // console.log(e)
        // console.log(e.target)
        if (e.target.value) {
          const phoneInfo = wx.getSystemInfoSync()
          console.log(phoneInfo)
          this.phone = phoneInfo.model
        } else {
          // 没选中
          this.phone = ''
        }
      }

    },
    // mounted () {
    onShow () {
      //  this.$root 就是Vue的根实例
      // $mp 代表根实例挂载了mp
      // query.id  就是当前的网址。。。获取参数
      //  这里可以改为 onshow
      this.bookid = this.$root.$mp.query.id
      //  获取详情页书籍信息
      this.getDetail()
      // 获取书籍评论
      this.getComments()
      // 获取用户信息
      const userinfo = wx.getStorageSync('userinfo')
      console.log('Detailuserinfo', userinfo)
      if (userinfo) {
        this.userinfo = userinfo
      }
    }
  }
</script>
<style lang='scss' scoped>
  .comment{
    margin-top:10px;
    .textarea{
      width:730rpx;
      height:200rpx;
      background:#eee;
      padding:10rpx;
    }
    .location{
      margin-top:10px;
      padding:5px 10px;
    }
    .phone{
      margin-top:10px;
      padding:5px 10px;

    }
  }

</style>

